<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap start Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome-->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <style>
        #item ul{list-style:none;}
		#item li{
		float:left;
		margin:10px;
		}

/*Navigation*/
.sidebar-nav {
  width: 240px;
  position: absolute;
  float: left;
  border-top: none;
  border-left: none;
  margin: 0em;
}
.sidebar-nav .nav-header {
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #c8c8cb;
  border-left: none;
  color: #333;
  display: block;
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
  font-weight: normal;
  font-size: 1em;
  line-height: 2.5em;
  padding: 0em .25em;
  margin-bottom: 0px;
  text-shadow: none;
  text-transform: none;
  /*Change the arrow direction if the item is collapsed*/

}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .5em;
  margin-right: .25em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header:hover {
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
}
.sidebar-nav .nav-header.collapsed .icon-chevron-up::before {
  content: "\f078";
}
.sidebar-nav .nav-header .icon-chevron-up {
  float: right;
}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .7em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header i[class^="icon-"] {
  margin-right: .75em;
}
.sidebar-nav .nav-list {
  margin: 0px;
  border: 0px;
  background: #f6f6f6;
}
.sidebar-nav .nav-list  > li > a:hover {
  background: #e0e0e8;
}
.sidebar-nav .nav-list  > .active > a,
.sidebar-nav .nav-list  > .active > a:hover {
  background: #d2d2dd;
  color: #555;
  text-shadow: none;
}
.sidebar-nav .nav-list  > .active > a:hover {
  background: #c3c3d2;
}
.sidebar-nav .nav-list  > li > a {
  color: #444;
  padding: .5em 1em;
}
.sidebar-nav .nav-list.collapse.in {
  border-bottom: 1px solid #ccc;
}
.content {
  min-width: 400px;
  position: relative;
  min-height: 560px;
  background: #fff;
  margin-left: 240px;
  border-left: 1px solid #cccccc;
  border-left: 3px solid #999999;
}

    </style>
</head>
<body>
<header>
    <div class="row clearfix" style="background-color:Gray">
        <div class="col-md-3">
            <img src="logo.jpg" alt="140x140" class="img-thumbnail" style="height:56px;width:240px;">
            <i class="fa fa-bars fa-2x" aria-hidden="true" style="margin:0 0 0 20px;"></i>
        </div>
        <div class="col-md-6" style="margin:-8px;">
            <h3>中信银行调度监控平台</h3>
        </div>
        <div class="col-md-2 pull-right" id='item'>
            <ul>
                <li title="首页">
                    <a href="#"><i class="fa fa-home fa-lg" aria-hidden="true"></i></a>
                </li>
                <li title="系统设置">
                    <a href="#"><i class="fa fa-cog fa-lg" aria-hidden="true"></i></span></a>
                </li>
                <li title="退出系统">
                    <i class="fa fa-power-off fa-lg" aria-hidden="true"></i>
                </li>
            </ul>
        </div>
    </div>
</header>
<!--menu-->
<div class="sidebar-nav">
    <a href="#dashboard-menu" class="nav-header" data-toggle="collapse"><i class="icon-dashboard"></i>Dashboard</a>
    <ul id="dashboard-menu" class="nav nav-list collapse in">
        <li><a href="#">首页</a></li>
        <li class="active"><a href="#">调度计划信息</a></li>
        <li><a href="#">修改调度计划信息</a></li>
        <li><a href="#">调度作业信息</a></li>
        <li><a href="#">调度作业关系</a></li>
    </ul>
</div>
<div class="content">

    <div class="header">
        <h1 class="page-title">调度计划信息</h1>
    </div>
    <ul class="breadcrumb">
        <li><a href="#">首页</a> <span class="divider">/</span></li>
        <li class="active">调度计划信息</li>
    </ul>

    <div class="container-fluid">

        <!--条件查询-->
        <div class="row">
            <div class="col-sm-2 labelName" style="font-size:20px;">调度计划编号：</div>
            <div class="col-sm-2"><input type="text" id="QplanId" name="planId" class="form-control" maxlength="15">
            </div>
            <div class="col-sm-2 labelName" style="font-size:20px;">调度计划名称：</div>
            <div class="col-sm-2"><input type="text" id="QplanName" name="planName" class="form-control" maxlength="30">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-2 labelName" style="font-size:20px;">调度计划类别：</div>
            <div class="col-sm-2">
                <select name="planType" id="QplanType" class="form-control">
                    <option value="" selected="selected">请选择</option>
                    <option value="a">a</option>
                    <option value="b">b</option>
                    <option value="c">c</option>
                </select>
            </div>
            <div class="col-sm-2 labelName" style="font-size:20px;">创建时间：</div>
            <div class="col-sm-6">
                <input type="text" id="fromCreateTime" name="fromCreateTime" class="form-control datePicker"
                       style="display:inline-block;width:auto;">
                --
                <input type="text" id="toCreateTime" name="toCreateTime" class="form-control datePicker"
                       style="display:inline-block;width:auto;">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9"></div>
            <div class="col-sm-2">
                <button class="btn btn-primary" id="submitSearch" onclick="query()" style="font-size:18px;">搜索</button>
                <button class="btn btn-primary" id="submitReset" type="reset" style="font-size:18px;">重置</button>
            </div>
        </div>
        <!--条件查询-->

        <div class="row-fluid">
            <div class="well">
                <table class="table" id="cjk">
                    <thead>
                    <tr>
                        <th>调度计划类别</th>
                        <th>作业号</th>
                        <th>前置作业号</th>
                        <th>是否删除</th>
                        <th>创建时间</th>
                        <th>更新时间</th>
                        <th>更新用户</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-template class="success">
                        <td field="planType" id="planType">{{planType}}</td>
                        <td field="jobId">{{jobId}}</td>
                        <td field="preJobId">{{preJobId}}</td>
                        <td field="isDeleted">{{isDeleted}}</td>
                        <td field="createTime">{{createTime}}</td>
                        <td field="updateTime">{{updateTime}}</td>
                        <td field="updateBy">{{updateBy}}</td>
                        <td>
                            <a href="#" onclick="edit()"><i class="fa fa-pencil" aria-hidden="true"></i></a>
                            <a href="#" onclick="shanchu()"><i class="fa fa-remove" aria-hidden="true"></i></a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>
    </div>
</div>
<script>
    function query(){
        $.ajax({
			type: "get",                //传递方法
			url:"/scheduler/jobRelations",     //数据接口
			dataType:"json",          //数据格式
			success: function(data)     //如果接收成功执行以下
			{
			    Tempo.prepare("cjk").render(data);
				console.log("查询成功");
			},
			error:function()//如果接收不成功执行以下
			{
			    console.log("查询错误");
			}
		});
    }
    function edit(){
        layer.open({
            title: '在线调试',
            content: $("template").html()
        });
    }
    function shanchu(){
        layer.confirm(
            '确定要删除此条记录？',
            {btn:['确定','取消'],icon:0},
            function(){
                var a=$("#planType").val();
                alert(a);
                var key = rowData[json['key']];
                $.ajax({
                    url:"/scheduler/jobRelations/"+key,
                    data:rowData,
                    type:"delete",
                    callback:function(data){
                        layer.msg('信息删除成功！');
                        $(elem).parent().parent().remove();
                    }
                })
            },
            function(){
                layer.msg('已取消删除此条记录！');
            }
        )
    }
</script>
<!--bootstrap-->
<script src="jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--tempo-->
<script src="tempo-2.0/tempo.js"></script>
<script src="tempo-2.0/tempo.min.js"></script>
<script src="layer/layer.js"></script>
<!--<template>
    <div class="template">
        <form id="editForm">
            <div class="row">
                <div class="col-sm-3 labelName">调度计划类别：</div>
                <div class="col-sm-9">
                    <input type="hidden" name="id">
                    <input type="text" class="form-control" name="planType">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 labelName">作业号：</div>
                <div class="col-sm-9">
                    <select type="select" class="form-control" name="planType" id ="jobId" required></select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3 labelName">前置作业号：</div>
                <div class="col-sm-9">
                    <input type="text" class="form-control" name="preJobId" maxlength="30" required>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-5 labelName">是否删除：</div>
                <div class="col-sm-7">
                    <input type="text" class="form-control" name="isDeleted" maxlength="30" required>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5 labelName">优先级：</div>
                <div class="col-sm-7">
                    <input type="number" class="form-control" name="planLevel" required min="1" max="10" pattern="/^\d{1,2}$/"/>
                </div>
            </div>
        </form>
    </div>
</template>-->

<table id="dataGrid" class="data-grid">
    <thead>
    <tr>
        <th>调度计划类别test</th>
        <th>作业号</th>
        <th>前置作业号</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="planGrid">
    <tr data-template>
        <td field="planType">{{planType}}</td>
        <td field="planName">{{jobId}}</td>
        <td field="planLevel">{{preJobId}}</td>
        <td>
            <i class="fa fa-edit editBtn" role="edit" title="修改"></i>
            <a href="#/planExecution">
                <i class="fa fa-mail-forward editBtn" role="jump" onclick="getRowId(this)"></i>
            </a>
        </td>
    </tr>
    </tbody>
</table>

<template>
    <div class="template">
        <form id="editForm">
            <div class="row">
                <div class="col-sm-3 labelName">调度计划类别：</div>
                <div class="col-sm-9">
                    <input type="hidden" name="id">
                    <input type="text" class="form-control" name="planType">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 labelName">作业号：</div>
                <div class="col-sm-9">
                    <select type="select" class="form-control" name="jobId" id ="planType1" required></select>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-3 labelName">前置作业号：</div>
                <div class="col-sm-9">
                    <input type="text" class="form-control" name="preJobId" maxlength="30" required>
                </div>
            </div>
        </form>
    </div>
</template>
</body>
</html>
